<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Echarts集成 - 折线图</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="/layuiadmin/layui/css/layui.css"
          media="all">
    <link rel="stylesheet" href="/layuiadmin/style/admin.css"
          media="all">
</head>
<body>

<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">会员日增长数量统计折线图</div>
                <div class="layui-card-body">
                    <div class="layui-carousel layadmin-carousel layadmin-dataview"
                         data-anim="fade" id="diffline">
                    </div>
                </div>
            </div>

            <div class="layui-card">
                <div class="layui-card-header">订单日增长数量统计图</div>
                <div class="layui-card-body">
                    <div class="layui-carousel layadmin-carousel layadmin-dataview"
                         data-anim="fade" id="pie">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<script src="/layuiadmin/layui/layui.js"></script>
<script type="text/javascript" src="/js/jquery/jquery.min.js"></script>
<script type="text/javascript" src="/js/echarts/echarts.min.js"></script>
<script>
    $(function () {
        var xData = [];
        var pieseries =  [];
        var lineseries = [];

        $.ajaxSettings.async = false;
        $.post("/statis/querOrderNumStatis?type=day", function (result) {
            var data = result.data;
            xData = data.date;
            pieseries = data.series;
            for (var i = 0; i < pieseries.length; i++) {
                pieseries[i].type = 'line';
                pieseries[i].symbolSize = 10;
                pieseries[i].symbol = 'circle';
                pieseries[i].smooth = true;
            }
        });

        $.post("/statis/queryCustomerStatisDiffline?type=day", function (result) {
            var data = result.data;
            xData = data.date;
            lineseries = data.series;
            for (var i = 0; i < lineseries.length; i++) {
                lineseries[i].type = 'line';
                lineseries[i].symbolSize = 10;
                lineseries[i].symbol = 'circle';
                lineseries[i].smooth = true;
            }
        });

        $.ajaxSettings.async = true;
        var echarts1 = echarts.init(document.getElementById('pie'));
        var echarts1_option = {
            title: {
                show: false
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                x: 'center',
                y: 'top',
                data: ['APP', 'Wechat', 'PC', '小程序']
            },
            xAxis: {
                data: xData
            },
            yAxis: {
                type: 'value',
                nameTextStyle: {
                    // 坐标轴名称的文字样式
                },
                axisLine: {
                    // 坐标轴轴线相关设置
                }
            },
            series: pieseries
        }
        echarts1.setOption(echarts1_option);

        var echarts2 = echarts.init(document.getElementById('diffline'));
        var echarts2_option = {
            title: {
                show: false
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                x: 'center',
                y: 'top',
                data: ['APP', 'Wechat', 'PC', '小程序']
            },
            xAxis: {
                data: xData
            },
            yAxis: {
                type: 'value',
                nameTextStyle: {
                    // 坐标轴名称的文字样式
                },
                axisLine: {
                    // 坐标轴轴线相关设置
                }
            },
            series: lineseries
        }
        echarts2.setOption(echarts2_option);
    });
</script>
</body>
</html>